<template>
  <div class="body_all">
    <div class="ba_top">
      <!-- <div>
        <el-select
          v-model="searchList.groupLeader"
          placeholder="员工手机号/姓名"
          size="mini"
        >
          <el-option
            v-for="item in leaderList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="searchList.groupLeader"
          placeholder="是否可登陆系统"
          size="mini"
        >
          <el-option
            v-for="item in leaderList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="searchList.groupLeader"
          placeholder="角色组"
          size="mini"
        >
          <el-option
            v-for="item in leaderList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
          style="margin-left: 8px"
          type="primary"
          icon="el-icon-search"
          size="mini"
          >搜索</el-button
        >
        <el-button
          type="refresh"
          icon="el-icon-refresh"
          @click="btnRefresh"
          size="mini"
          >重置</el-button
        >
      </div> -->
    </div>
    <div class="ba_main">
      <div>
        <el-container
          style="border-right: 1px solid #eee; border-top: 1px solid #eee"
        >
          <el-aside width="200px">
            <el-menu ref="elMenu" :default-openeds="['1']">
              <div v-for="(item, index) in labelList" :index="index">
                <el-submenu index="1">
                  <template slot="title">
                    <span :title="item.name" class="textHid">{{
                      item.name
                    }}</span>
                  </template>
                  <el-menu-item
                    v-for="(itemUser, i) in item.childlist"
                    :key="i"
                    :index="'' + i"
                    @click="demSel(itemUser.id)"
                    >{{ itemUser.name }}</el-menu-item
                  >
                </el-submenu>
              </div>
            </el-menu>
          </el-aside>

          <el-container>
            <el-main style="margin-left: 15px">
              <el-table
                :data="tableData"
                v-loading="loading"
                style="width: auto"
              >
                <el-table-column prop="name" label="姓名"> </el-table-column>
                <el-table-column prop="department" label="所属部门">
                </el-table-column>
                <el-table-column prop="telephone" label="注册手机号">
                </el-table-column>
                <!-- <el-table-column prop="status" label="员工分组">
                </el-table-column>
                <el-table-column prop="direct_leader" label="直属上级">
                </el-table-column> -->
                <!-- <el-table-column
                  prop="is_leader_in_dept"
                  label="是否可登陆系统"
                >
                </el-table-column> -->
                <!-- <el-table-column prop="name" label="是否占用license">
                </el-table-column> -->
                <!-- <el-table-column prop="direct_leader" label="开启会话存档功能">
                </el-table-column> -->
                <el-table-column prop="position" label="职位">
                </el-table-column>
                <!-- <el-table-column prop="main_department" label="SCRM助手">
                </el-table-column> -->
                <!-- <el-table-column prop="order" label="序号"> </el-table-column> -->
                <el-table-column
                  v-if="false"
                  label="操作"
                  width="200"
                  flex="right"
                >
                  <template slot-scope="scope">
                    <span class="edit_btn" @click="dialogData(scope.row)"
                      >详情</span
                    >
                    <span
                      class="edit_btn"
                      style="margin-left: 10px"
                      @click="editerData(scope.row.id)"
                      >修改角色</span
                    >
                    <span
                      class="edit_btn"
                      style="margin-left: 10px"
                      @click="disData(scope.row.id)"
                      >禁用登陆</span
                    >
                  </template>
                </el-table-column>
              </el-table>
              <div class="footer">
                <span style="margin-right: 10px">共{{ datanumber }}条</span>
                <!-- <span>当前第{{ searchList.page }}页共有{{ tableData.length }}条</span> -->
                <span :class="searchList.page == 1 ? 'ban_btn_no' : ''">
                  <i
                    class="el-icon-arrow-left operable"
                    :class="searchList.page == 1 ? 'pageOff' : 'pageOn'"
                    @click="prevPage"
                  ></i>
                </span>
                <div style="display: inline; margin: 0 10px">
                  <el-input
                    :title="searchList.page"
                    style="width: 60px"
                    v-model="searchList.page"
                    @change="sizechange()"
                    size="mini"
                  ></el-input>
                  <span style="margin: 0 5px 0 15px">/</span>
                  <span>{{ pagenumber==0?'1':pagenumber }}</span>
                </div>
                <span :class="seenumber > datanumber ? 'ban_btn_no' : ''">
                  <i
                    class="el-icon-arrow-right operable"
                    :class="seenumber > datanumber ? 'pageOff' : 'pageOn'"
                    @click="nextPage"
                  ></i>
                </span>
                <span style="margin-left: 10px">每页</span>
                <el-select
                  style="width: 70px"
                  v-model="searchList.size"
                  @change="sizechange()"
                  placeholder="请选择"
                  size="mini"
                >
                  <el-option
                    v-for="item in sizennList"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                条
              </div>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </div>
    <!-- 详情 -->
    <el-dialog
      title="员工详情"
      :visible.sync="dialogDetails"
      width="45%"
      :close-on-press-escape="false"
    >
      <el-descriptions>
        <el-descriptions-item label="群名称">kooriookami</el-descriptions-item>
        <el-descriptions-item label="群主">18100000000</el-descriptions-item>
        <el-descriptions-item label="群活跃度">苏州市</el-descriptions-item>
        <el-descriptions-item label="群人数">苏州市</el-descriptions-item>

        <el-descriptions-item label="今日入群数"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="今日退群数"
          >18100000000</el-descriptions-item
        >
        <el-descriptions-item label="今日消息数">苏州市</el-descriptions-item>
        <el-descriptions-item label="建群时间">苏州市</el-descriptions-item>
        <el-descriptions-item label="群标签"
          ><el-tag size="small">学校</el-tag></el-descriptions-item
        >
        <el-descriptions-item label="会话存档"
          >18100000000</el-descriptions-item
        >
        <el-descriptions-item label="关联企业">苏州市</el-descriptions-item>
        <el-descriptions-item label="群状态">苏州市</el-descriptions-item>
        <el-descriptions-item label="解散时间"
          >kooriookami</el-descriptions-item
        >
      </el-descriptions>
      <div class="foot_btn">
        <el-button @click="dialogDetails = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="修改角色"
      :close-on-click-modal="false"
      :visible.sync="sourceEditer"
      width="45%"
      :close-on-press-escape="false"
    >
      <div class="dialogDiv">
        <el-form
          :model="sourceData"
          :rules="rulesSource"
          ref="sourceData"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="sourceData.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属部门">
            <el-select v-model="searchList.groupLeader" placeholder="请选择">
              <el-option
                v-for="item in leaderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册手机号" prop="name">
            <el-input
              v-model="sourceData.name"
              placeholder="请输入注册手机号"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="员工分组">
            <el-select v-model="searchList.groupLeader" placeholder="请选择">
              <el-option
                v-for="item in leaderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="直属上级">
            <el-select v-model="searchList.groupLeader" placeholder="请选择">
              <el-option
                v-for="item in leaderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="是否可登陆系统">
            <el-switch v-model="sourceData.start"> </el-switch>
          </el-form-item>
          <!-- <el-form-item label="是否占用license">
            <el-switch v-model="sourceData.start"> </el-switch>
          </el-form-item> -->
          <el-form-item label="开启会话存档功能">
            <el-switch v-model="sourceData.start"> </el-switch>
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="searchList.groupLeader" placeholder="请选择">
              <el-option
                v-for="item in leaderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot_btn">
        <el-button @click="resetSource('sourceData')">取消</el-button>
        <el-button type="primary" @click="submitSource('sourceData')"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      sizennList: [{ value: 20 }, { value: 50 }, { value: 100 }],
      // 搜索条件
      searchList: {
        department_id: "",
        name: "",
        phone: "",
        page: 1,
        size:"20",
      },
      datanumber: "0",
      seenumber: "0",
      pagenumber: "0",
      leaderList: [
        {
          lable: "d",
          value: 1,
        },
      ],
      sourceEditer: false,
      dialogDetails: false,
      sourceData: {
        name: "",
        start: 0,
      },
      rulesSource: {
        name: [{ required: true, message: "请输入来源", trigger: "blur" }],
      },
      tableData: [],
      //   标签
      labelSearch: "",
      labelList: [],
    };
  },
  created() {
    this.loading = true;
    this.getDepartment();
    this.getMember();
  },
  methods: {
    // 获取部门列表
    getDepartment() {
      this.$cmsapi.departmentList().then(
        (res) => {
          if (res.code == 0) {
            for (let i = 0; i < res.data.length; i++) {
              for (const key in res.data[i]) {
                if (!res.data[i][key] && res.data[i][key] !== 0) {
                  res.data[i][key] = "";
                }
              }
            }
            this.labelList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 获取部门成员数据
    getMember() {
      this.$cmsapi.departmentUserList(this.searchList).then(
        (res) => {
          if (res.code == 0) {
            for (let i = 0; i < res.data.length; i++) {
              for (const key in res.data[i]) {
                if (!res.data[i][key] && res.data[i][key] !== 0) {
                  res.data[i][key] = "";
                }
              }
            }
            this.seenumber = this.searchList.size * this.searchList.page;
            this.datanumber = res.count;
            this.pagenumber = Math.ceil(res.count / this.searchList.size);
            this.tableData = res.data;
          } else {
            this.$message.error(res.msg);
          }
          this.loading = false;
        },
        (err) => {
          console.log(err);
          this.loading = false;
        }
      );
    },
    // 最大条数变化
    sizechange() {
      this.loading = true;
      this.getMember();
    },
    //上一页
    prevPage() {
      this.loading = true;
      this.searchList.page -= 1;
      this.getMember();
    }, // 下一页
    nextPage() {
      this.loading = true;
      this.searchList.page += 1;
      this.getMember();
    },
    // 选中部门
    demSel(index) {
      this.loading = true;
      this.searchList.department_id = index;
      this.getMember();
    },
    // 条件重置
    btnRefresh() {
      this.loading = true;
      this.searchList = this.$options.data().searchList;
      this.$refs.elMenu.activeIndex = null;
      this.getDepartment();
      this.getMember();
    },
    // 详情
    dialogData(obj) {
      this.dialogDetails = true;
    },
    // 新增&编辑
    editerData(obj) {
      this.sourceEditer = true;
    },
    // 取消&关闭
    resetSource(formName) {
      this.$refs[formName].resetFields();
      this.sourceEditer = false;
      this.sourceData = this.$options.data().sourceData;
    },
    // 提交
    submitSource(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.sourceEditer = false;
          this.sourceData = this.$options.data().sourceData;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 禁用
    disData() {
      this.$confirm("此操作将禁用该角色登陆, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "禁用成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
<style scoped>
.labelType {
  display: flex;
}
.labelType .label {
}
.labelType .table {
  flex-grow: 1;
}
</style>